<template>
  <view class="container">
    <view class="fill-base" style="border-radius: 20rpx 20rpx 0 0">
      <u-tabs
        :list="orderTabList"
        lineWidth="30"
        lineColor="#00D075"
        @click="clickTab"
        :activeStyle="{
          color: '#00D075',
          fontSize: '28rpx',
          fontWeight: 'bold',
        }"
        :scrollable="false"
        :inactiveStyle="{
          fontSize: '28rpx',
          color: '#788096',
        }"
      >
      </u-tabs>
    </view>

    <elderly-goods v-if="orderTabIndex == 0" :elderList="list"></elderly-goods>
    <goods v-if="orderTabIndex == 1" :goodsList="goodsList"></goods>
    <emptyData
      :width="empty.width"
      :height="empty.height"
      :text="empty.text"
      :icon="empty.icon"
      :marginTop="empty.marginTop"
      v-if="orderTabIndex == 0 && list.length == 0"
    ></emptyData>
    <emptyData
      :width="empty.width"
      :height="empty.height"
      :text="empty.text"
      :icon="empty.icon"
      :marginTop="empty.marginTop"
      v-if="orderTabIndex == 1 && goodsList.length == 0"
    ></emptyData>
  </view>
</template>

<script>
import goods from "../../components/goods/goods.vue";
import elderlyGoods from "../../components/elderlyGoods/elderlyGoods.vue";
export default {
  components: {
    elderlyGoods,
    goods,
  },
  data() {
    return {
      orderTabIndex: 0,
      orderTabList: [
        {
          name: "服务项目",
        },
        {
          name: "线上产品",
        },
      ],
      page: 1,
      list: [],
      empty: {
        width: 135,
        height: 134,
        text: "暂无数据",
        icon: "/image/emptyAddress.png",
        marginTop: 100,
      },
      goodsList: [],
    };
  },
  onLoad(data) {
    this.category_id = data.category_id || 0;
    uni.setNavigationBarTitle({
      title: data.title,
    });
    this.getList();
    this.getGoodsList();
  },
  onReachBottom() {
    this.page++;
    if (this.orderTabIndex == 0) {
      this.getList();
    } else {
      this.getGoodsList();
    }
  },
  methods: {
    clickTab(e) {
      this.orderTabIndex = e.index;
      this.page = 1;
      if (this.orderTabIndex == 0) {
        this.getList();
      } else {
        this.getGoodsList();
      }
    },
    getList() {
      this.$api.sendRequest({
        url: "/api/yanglao/goodslists",
        data: {
          page: this.page,
          page_size: 20,
          category_id: this.category_id,
        },
        success: (res) => {
          if (res.code == 0) {
            if (this.page == 1) this.list = [];
            this.list = [...this.list, ...res.data.list];

            this.list.forEach((item) => {
              if (item.goods_label) {
                // 判断里面是否有逗号，如果有就分割成数组
                if (item.goods_label.indexOf(",") != -1) item.goods_label = item.goods_label.split(",");
                else item.goods_label = [item.goods_label];
              } else item.goods_label = [];

              if (item.goods_image) {
                var images = item.goods_image.split(",");
                item.goods_image = images[0];
              }
            });
          }
        },
      });
    },
    getGoodsList() {
      this.$api.sendRequest({
        url: "/api/goodssku/yanglaopage",
        data: {
          page: this.page,
          page_size: 30,
          yanglao_category_id: this.category_id,
        },
        success: (res) => {
          if (res.code == 0) {
            if (this.page == 1) this.goodsList = [];
            this.goodsList = [...this.goodsList, ...res.data.list];
            // 增加判断，如果返回的商品为空数组，则修改顶部tabs栏的显示，让其不显示线上产品
            if (this.goodsList.length == 0) {
              this.orderTabList = [
                {
                  name: "服务项目",
                },
              ];
            }

            this.goodsList.forEach((item) => {
              if (item.goods_image) {
                var images = item.goods_image.split(",");
                item.goods_image = images[0];
              }
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
